import React, { Component } from "react";
import {
  Steps,
  Button,
  message,
  Form,
  Input,
  Switch,
  Select,
  Checkbox,
  Result,
} from "antd";
import "./zujidetaile.less";
const { Step } = Steps;
const { Option } = Select;
const { TextArea } = Input;
function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};
const steps = [
  {
    title: "创建任务",
    content: () => {
      return (
        <Form {...formItemLayout}>
          <Form.Item label="任务名称">
            <Input placeholder="1-20个字符(支持数字,字母,中文,下划线和符号)" />
          </Form.Item>

          <Form.Item label="扫描目标">
            <TextArea autoSize />
          </Form.Item>

          <Form.Item label="执行类型">
            <Select defaultValue="1">
              <Option value="1">立即执行</Option>
              <Option value="2">Option 2</Option>
              <Option value="3">Option 3</Option>
            </Select>
          </Form.Item>

          <Form.Item label="扫描时间段">
            <Input placeholder="内容格式如0:00-12:00" />
          </Form.Item>

          <Form.Item label="调度优先级">
            <Select defaultValue="2">
              <Option value="1">高</Option>
              <Option value="2">中</Option>
              <Option value="3">低</Option>
            </Select>
          </Form.Item>

          <Form.Item label="发送报告到邮箱">
            <Checkbox onChange={onChange}>是</Checkbox>
            <Checkbox onChange={onChange}>否</Checkbox>
          </Form.Item>

          <Form.Item label="漏洞扫描模板">
            <Select defaultValue="1">
              <Option value="1">快速扫描</Option>
              <Option value="2">全局扫描</Option>
              <Option value="3">自定义扫描</Option>
            </Select>
          </Form.Item>

          <Form.Item label="漏洞探测">
            <Switch />
          </Form.Item>

          <Form.Item label="口令猜测">
            <Checkbox onChange={onChange}></Checkbox>
          </Form.Item>
        </Form>
      );
    },
  },
  {
    title: "高级选项",
    content: () => {
      return (
        <Form {...formItemLayout}>
          <Form.Item label="探测端口服务">
            <Switch />
          </Form.Item>
          <Form.Item label="扫描UDP端口">
            <Switch />
          </Form.Item>
          <Form.Item label="端口列表">
            <Select defaultValue="1">
              <Option value="1">默认</Option>
              <Option value="2">全局扫描</Option>
              <Option value="3">自定义扫描</Option>
            </Select>
          </Form.Item>
          <Form.Item label="端口探测方式">
            <Select defaultValue="1">
              <Option value="1">TCP SPN</Option>
              <Option value="2">全局扫描</Option>
              <Option value="3">自定义扫描</Option>
            </Select>
          </Form.Item>
          <Form.Item label="局域网app探测">
            <Switch />
          </Form.Item>
          <Form.Item label="脚本超时时间">
            <Input value="300" />
          </Form.Item>
          <Form.Item label="逃过主机发现直接视为存货主机">
            <Switch />
          </Form.Item>
          <Form.Item label="操作系统识别">
            <Switch />
          </Form.Item>
          <Form.Item label="系统探测方式">
            <Input value="ICMP" />
          </Form.Item>
          <Form.Item label="每秒发送字节速">
            <Input value="30720" />
          </Form.Item>
        </Form>
      );
    },
  },
  {
    title: "完成",
    content: () => {
      return (
        <Result
          status="success"
          title="创建成功"
          extra={[
            <Button type="primary" key="console">
              回到主机扫描
            </Button>,
            <Button key="buy">重新创建</Button>,
          ]}
        />
      );
    },
  },
];
class zujidetaile extends Component {
  constructor(props) {
    super(props);
    this.state = { current: 0 };
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  render() {
    const { current } = this.state;
    return (
      <div className="wap">
        <Steps current={current}>
          {steps.map((item) => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content()}</div>
        <div className="steps-action">
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              下一步
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={() => message.success("创建完成!")}>
              完成
            </Button>
          )}
          {current > 0 && (
            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              返回上一级
            </Button>
          )}
        </div>
      </div>
    );
  }
}

export default zujidetaile;
